<template>
    <div class="hello">
        <!-- v-drag -->
        <div v-drag class="drag" ref="dragdiv">
            <!-- <div class="border-right"></div> -->
        </div>
        <div id="container" v-dragin ref="containerdiv">

        </div>
      <!-- <header-content></header-content>
      <left-menu> </left-menu> -->
        <!-- <button @click="toshow">点击让子组件显示</button>  
        <component v-bind:is="which_to_show"></component>  

        <button @click="newpagebtn"> newpage按钮 </button>
        <button @click="newpagebtn22"> newpage按钮222222 </button>
        <button @click="testbtn"> axios按钮 </button> -->
        

    </div>
</template>

<script>
    import a1 from './a1.vue'
    import a2 from './a2.vue'
    import store from './store.js'
    // import HeaderContent from './headercontent'
    // import LeftMenu from './leftmenu'
let putcontain=false;
export default {
    components: {
        // HeaderContent,
        // LeftMenu,
        first:a1  ,
        second: a2 ,
        third: { //第三个子组件  
            template: "<div>这里是子组件3</div>"  
        }, 
    },
    mounted(){
        console.log(this.$refs.dragdiv)
        var disx = sessionStorage.getItem("disx");
        var disy = sessionStorage.getItem("disy");
        this.$refs.dragdiv.style.left=disx;
        this.$refs.dragdiv.style.top=disy;
        // debugger
        $("#container").ondragenter = function(){
            console.log('有图片被拖动进来了...');
        }
        $("#container").ondragleave = function(){
            console.log('有图片被拖着离开了...');
        }
        $("#container").onmousemove=function(e){
            console.log("onmousemove");
        }
    },
    data () {
        return {
            which_to_show: "first" ,
        }
    },
    methods: {
        toshow: function () {   //切换组件显示  
            var arr = ["first", "second", "third"];  
            var index = arr.indexOf(this.which_to_show);  
            if (index < 3) {  
                this.which_to_show = arr[index + 1];  
            } else {  
                this.which_to_show = arr[0];  
            }  
        } ,
        newpagebtn(){

            store.posturl().then((res) =>{
                console.log("请求完成");
            })
        },
        testbtn(){
            // $.ajax({
            //     type: "post",
            //     dataType: "html",
            //     url: '/Resources/GetList.ashx',
            //     data: "dataurl",
            //     success: function (data) {
            //         console.log(data);
            //     },
            //     complete(data){
            //         console.log(data);
            //     }
            // });
            axios.post('http://allcaster.cn:8200/auth/api/auth/login',{
                'loginName': '17629013371',
                'loginPass': 'aab1966bd547a6f54218a05f7b3650b1',
                'type': 2
            })
        },
        newpagebtn22(){
            $.ajax({
                type: "get",
                dataType: "json",
                url: 'http://allcaster.cn:8200/merchant/api/merchant/agent/list/10000037',
                headers: {'subSystemCode':'resource_repast'},
                data: {
                    'page': 1,
                    'size': 10,
                    'searchKey': "",
                    'status': 2
                },
                success: function (data) {
                    console.log(data);
                },
                complete:function(data){
                    console.log(data);
                }
            });
        },
    },
    directives:{
        drag(el,bindings){
            el.onmousedown = function(e){
                console.log("onmousedown")
                var disx = e.pageX - el.offsetLeft;
                var disy = e.pageY - el.offsetTop;
                var elementW = el.clientWidth/2;
                var elementH = el.clientHeight/2;
                document.onmousemove = function (e){
                    // el.style.left = e.pageX - disx+'px';
                    // el.style.top = e.pageY - disx+'px';
                     el.style.left = e.pageX - elementW+'px';
                    el.style.top = e.pageY - elementH+'px';
                }
                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }
                console.log(el.style.left);
                console.log(el.style.top);
                putcontain = true;
            },
            el.onmouseup=function(e){
                sessionStorage.setItem("disx",el.style.left);
                sessionStorage.setItem("disy",el.style.top);
                if(putcontain){
                    el.style.width=$("#container").width()+"px";
                    $("#container").html($(".drag"));
                    
                }
            }
            el.onmousemove=function(e){
                console.log("onmousemove");
            }
        },
        dragin(el){
            el.onmousemove=function(e){
                console.log(putcontain);
            }
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.drag{
    width: 100px;
    height: 100px;
    /* position: absolute; */
    position: relative;
    top: 0;
    left: 0;
    background-color: red;
}
.border-right{
    width:10px;
    height: 100px;
    background: blue;
}
#container{
    width:500px;
    height:500px;
    border: 1px solid #ddd;
}
</style>
